---
type: tutorial
title: Crea un footer per i social media
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Costruisci un nuovo componente da zero, poi aggiungilo alle tue pagine
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


<PreCheck>
  - Crea un componente Footer
  - Crea e passa props a un componente Social Media
</PreCheck>

Ora che hai usato i componenti Astro su una pagina, è il momento di usare un componente all'interno di un altro componente!

## Crea un Componente Footer
<Steps>
1. Crea un nuovo file nella posizione `src/components/Footer.astro`.

2. Copia il seguente codice nel tuo nuovo file, `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Scopri di più sui miei progetti su <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### Importa e usa `Footer.astro`

<Steps>
1. Aggiungi la seguente dichiarazione di importazione al frontmatter in ciascuna delle tue tre pagine Astro (`index.astro`, `about.astro` e `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Aggiungi un nuovo componente `<Footer />` nel tuo template Astro su ogni pagina, appena prima del tag di chiusura `</body>` per visualizzare il tuo footer nella parte inferiore della pagina.

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. Nell'anteprima del tuo browser, verifica di poter vedere il tuo nuovo testo del footer su ogni pagina.
</Steps>

<Box icon="puzzle-piece">

## Prova tu stesso - Personalizza il tuo footer

Personalizza il tuo footer per visualizzare più social network (es. Instagram, Twitter, LinkedIn) e includi il tuo username per collegarti direttamente al tuo profilo.

</Box>

### Verifica del Codice
Se hai seguito ogni passaggio del tutorial, il tuo file `index.astro` dovrebbe apparire così:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Pagina iniziale';
---

<html lang="it">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>
```

## Crea un componente Social Media

Dato che potresti avere più account online a cui puoi collegarti, puoi creare un singolo componente riutilizzabile e visualizzarlo più volte. Ogni volta, gli passerai diverse proprietà (`props`) da utilizzare: la piattaforma online e il tuo username lì.

<Steps>
1. Crea un nuovo file nella posizione `src/components/Social.astro`.

2. Copia il seguente codice nel tuo nuovo file, `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Importa e usa `Social.astro` nel tuo Footer

<Steps>
1. Cambia il codice in `src/components/Footer.astro` per importare, poi usare questo nuovo componente tre volte, passando diversi **attributi del componente** come props ogni volta:

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Scopri di più sui miei progetti su <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Controlla l'anteprima del tuo browser e dovresti vedere il tuo nuovo footer visualizzare link a queste tre piattaforme su ogni pagina.
</Steps>

## Stila il tuo Componente Social Media

<Steps>
1. Personalizza l'aspetto dei tuoi link aggiungendo un tag `<style>` a `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Aggiungi un tag `<style>` a `src/components/Footer.astro` per migliorare il layout dei suoi contenuti.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Controlla di nuovo l'anteprima del tuo browser e conferma che ogni pagina mostra un footer aggiornato.
</Steps>

<Box icon="question-mark">

### Metti alla prova te stesso

1. Quale riga di codice devi scrivere nel frontmatter di un componente Astro per ricevere valori di `title`, `author` e `date` come props?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>


2. Come **passi valori come props** a un componente Astro?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
</Box>



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso creare nuovi componenti `.astro` in `src/components/`
- [ ] Posso importare e usare componenti Astro all'interno di altri componenti Astro.
- [ ] Posso passare props a un componente Astro.
</Checklist>
</Box>

### Risorse

- [Props dei Componenti in Astro](/it/basics/astro-components/#proprietà-dei-componenti)
